<template>
	<ToolbarItemContainer ref="container" :iconFile="evaluateIcon" title="订单" :needBottomPopup="true"
		:iconWidth="isUniFrameWork ? '26px' : '20px'" :iconHeight="isUniFrameWork ? '26px' : '20px'"
		@onDialogShow="onDialogShow" @onDialogClose="onDialogClose">
		<view class="order-container">
			<view class="order-top">
				<view class="top-title">信息确认</view>
				<uni-icons color="#D9D9D9" type="closeempty" size='24' @click="closeDialog"></uni-icons>
			</view>
			<view class="order-main">
				<view class="main-item">
					<view class="item-label">职位选择</view>
					<view class="item-type">
						<view class="type-picker">
							<picker v-if="ranges.length" style="width: 100%;height: 40rpx;" :value="selectIndex" mode="selector" range-key="name" :range="ranges" @change="bindPickerChange">
								<view>{{  ranges && ranges[selectIndex] ? ranges[selectIndex].name : '请选择'}}</view>
							</picker>	
							<view v-if="!ranges.length" class="">暂无发布的职位</view>
						<!-- 	<picker  mode="selector" range-key="name" :range="ranges" :value="selectIndex">
							   <view class="">{{ ranges && ranges[selectIndex].name ? ranges[selectIndex].name : '请选择' }}</view> 
							</picker> -->
						</view>
						<image src="/static/img/common/arrr.png" mode=""></image>
					</view>
				</view>
				<!-- 薪资范围 -->
				<view class="main-item">
					<view class="item-label">薪资范围</view>
					<view class="item-type">
					  <view class="type-ipt">
							<uni-easyinput v-model="formData.money" placeholder="请输入"></uni-easyinput>
							<text>元/单</text>
							<text>—</text>
							<uni-easyinput v-model="formData.num" placeholder="请输入"></uni-easyinput>
							<text>单</text>
						</view>
						<!-- <image src="/static/img/common/arrr.png" mode=""></image> -->
					</view>
				</view>
				<!-- 结算方式 -->
				<view class="main-item">
					<view class="item-label">结算方式</view>
					<view class="item-types">
					  <view class="type-fs">
							<view :class="index === fsIndex ? 'fs-item fs-item-active' : 'fs-item'"
							v-for="(item, index) in typeList"
							:key="index"
							@click="jumpItem(index)">{{ item.name }}</view>
						</view>
						<!-- <image src="/static/img/common/arrr.png" mode=""></image> -->
					</view>
				</view>
			</view>
			<view class="order-btn" @click="submitEvaluate">确认</view>
		</view>
<!-- 		<div :class="['evaluate', !isPC && 'evaluate-h5']">
			<div :class="['evaluate-header', !isPC && 'evaluate-h5-header']">
				<div :class="[
            'evaluate-header-content',
            !isPC && 'evaluate-h5-header-content',
          ]">
					{{ TUITranslateService.t("信息确认") }}
				</div>
				<div v-if="!isPC" :class="[
            'evaluate-header-close',
            !isPC && 'evaluate-h5-header-close',
          ]" @click.stop="closeDialog">
					{{ TUITranslateService.t("关闭") }}
				</div>
			</div>
			<div :class="['evaluate-content', !isPC && 'evaluate-h5-content']">
				<div :class="[
            'evaluate-content-button',
            !isPC && 'evaluate-h5-content-button',
          ]">
					<button :class="['btn', price&&num ? 'btn-valid' : 'btn-invalid']" @click="submitEvaluate">
						{{ TUITranslateService.t("发送") }}
					</button>
				</div>
			</div>
			<div :class="['evaluate-adv', !isPC && 'evaluate-h5-adv']">
				<div>职位选择：</div>
				<div style="display: flex;align-items: center;height: 40px;justify-content: space-between;">
					<div style="padding: 5px 8px;background:#6B64D3;border-radius: 4px;color: #fff;" @click="isChooseTo">{{selectedOptionValue?selectedOptionValue:'请选择职业'}}</div>
					<div v-if="isChoose" style="position: absolute;top:0;left:0;right:0;bottom: 0;background: #fff;">
						<input v-model="zhiye" style="width: 90%;height: 30px;background: #eee;border-radius: 4px;margin-left:5%;padding-left: 2%;margin-top: var(--status-bar-height);" />
						<div style="width: 100%;display: flex;flex-wrap: wrap;margin-top: 10px;">
							<div :style="{
								padding:'5px 8px',
								marginTop:'5px',
								marginLeft: '8px',
								background: chooseIndex == index ? '#6B64D3' : '#eee',
								borderRadius: '4px',
								color: chooseIndex == index ? '#fff' : 'initial'
								}" v-for="(item,index) in options" :key="index" @click="toChoose(index)">
								{{item.text}}
							</div>
						</div>
					</div>
				</div>
				<div>薪资范围：</div>
				<div style="display: flex;align-items: center;height: 40px;justify-content: space-between;">
					<div style="display: flex;align-items: center;height: 40px;">
						<span>单价：</span>
						<input
							style="width: 60px;height: 30px;background: #eee;border-radius: 4px;margin-left:5px;margin-right: 5px;padding-left: 10px;"
							v-model="price" />
						<span style="display: flex;">元/单;</span>
					</div>
					<div style="display: flex;align-items: center;height: 40px;">
						<input
							style="width: 60px;height: 30px;background: #eee;border-radius: 4px;margin-left:5px;margin-right: 5px;padding-left: 10px;"
							v-model="num" />
						<span>单</span>
					</div>
				</div>
				<div>结算方式：</div>
				<div style="display: flex;align-items: center;height: 40px;justify-content: space-between;">
					<div v-for="(item ,index) in typeList" :key="index" :style="{  
						width: '60px',
						height: '30px',
						background: jieIndex == index ? '#6B64D3' : '#eee',
						borderRadius: '4px',
						display: 'flex',  
						justifyContent: 'center',  
						alignItems: 'center',  
						color: jieIndex == index ? '#fff' : 'initial'
						}" @click="toChange(index)">{{item}}</div>
				</div>
				<div style="display: flex;height: 40px;margin-top: 20px;">
					<div style="margin-left: auto;">结算薪资：<span
							style="color: #ef1e1ede;">￥{{(Number(price)?Number(price):0)*(Number(num)?Number(num):1)}}</span>
					</div>
				</div>
			</div>
		</div> -->
	</ToolbarItemContainer>
</template>
<script setup lang="ts">
	import TUIChatEngine, {
		TUITranslateService,
		TUIStore,
		StoreName,
		IConversationModel,
		TUIChatService,
		SendMessageParams,
		SendMessageOptions,
	} from '@tencentcloud/chat-uikit-engine';
	import { ref, computed, onMounted } from '../../../../adapter-vue';
	import ToolbarItemContainer from '../toolbar-item-container/index.vue';
	import evaluateIconLight from '../../../../assets/icon/evalute-light.svg';
	import evaluateIconDark from '../../../../assets/icon/evalute-dark.svg';
	import pay from '../../../../assets/icon/pay.svg';
	import Link from '../../../../utils/documentLink';
	import Icon from '../../../common/Icon.vue';
	import starIcon from '../../../../assets/icon/star.png';
	import starLightIcon from '../../../../assets/icon/star-light.png';
	import { CHAT_MSG_CUSTOM_TYPE } from '../../../../constant';
	import { isPC, isH5, isUniFrameWork } from '../../../../utils/env';
	import { isEnabledMessageReadReceiptGlobal } from '../../utils/utils';
	import OfflinePushInfoManager, { IOfflinePushInfoCreateParams } from '../../offlinePushInfoManager/index';
	import TUIChatConfig from '../../config';
import api from '@/utils/api/recruit.js'
import { showToast } from '@/utils/toast.js'
onMounted(_ => {
	getZw()
})
 const ranges = ref([
 ])
 const fsIndex = ref(null)
 const selectIndex = ref(null)
	const options = ref([
		{ value: 0, text: '视频剪辑师' },
		{ value: 12, text: '调音师' },
		{ value: 11, text: '调音师' },
		{ value: 11232, text: '调音师' },
		{ value: 1132, text: '调音师' },
		{ value: 1123, text: '调音师' },
		{ value: 1231, text: '调音师' },
		{ value: 1231, text: '调音师' },
		{ value: 1, text: '调音师' },
		{ value: 1, text: '调音师' },
		{ value: 1, text: '调音师' },
		{ value: 1, text: '调音师' },
		{ value: 1, text: '调音师' },
		{ value: 11232, text: '调音师' },
		{ value: 1132, text: '调音师' },
		{ value: 1123, text: '调音师' },
		{ value: 1231, text: '调音师' },
		{ value: 1231, text: '调音师' },
		{ value: 1, text: '调音师' },
		{ value: 1, text: '调音师' },
		{ value: 1, text: '调音师' },
		{ value: 1, text: '调音师' },
		{ value: 1, text: '调音师' },
	])
	const isChoose = ref(false)
	const isChooseTo = () => {
		isChoose.value = true
	}
	const jumpItem = (index: any) => {
		fsIndex.value =  index
	}
	const formData = ref({
		positionName: '',
		num: '',
		salarySettleType: '',
		money: '',
		publishPositionId: ''
	})
	// 获取职位
	const getZw = async _ => {
		let data = {
			positionState: "RELEASE",
			userId: uni.getStorageSync('userId'),
			positionType: 'PART_TIME_JOB',
			pageNo: 1,
			pageSize: 999
		}
		const res = await api.queryPublishPosition(data)
		ranges.value = res.data.list.length > 0 ? res.data.list.map(item=> {
			return { name: item.positionName, value: item.id, salaryMax: item.salaryMax, workDays: item.workDays, salarySettleType: item.salarySettleType}
		}) : []
	}
	// 选择
	const bindPickerChange = e => {
		let index = e.detail.value
		selectIndex.value = index
		formData.value.positionName = ranges.value[index].name
		formData.value.publishPositionId = ranges.value[index].value
		formData.value.money = ranges.value[index].salaryMax
		formData.value.num = ranges.value[index].workDays
		fsIndex.value = ranges.value[index].salarySettleType === 'SINGLE_SETTLEMENT' ? 0 :
		 ranges.value[index].salarySettleType === 'DAILY_SETTLEMENT' ? 1 : ranges.value[index].salarySettleType === 'MONTHLY_SETTLEMENT' ? 2 : ''
	}
	const zhiye=ref('')
	const chooseIndex = ref(0)
	const toChoose = (index : number) => {
		chooseIndex.value = index
		selectedOptionValue.value = options.value[chooseIndex.value].text
		isChoose.value = false
	}
	const price = ref()
	const num = ref()
	const typeList = ref([
		{ name: '单结', value: 'SINGLE_SETTLEMENT' },
		{ name: '日结', value: 'DAILY_SETTLEMENT' },
		{ name: '月结', value: 'MONTHLY_SETTLEMENT' },
	])
	const jieIndex = ref(0)
	const toChange = (index : number) => {
		jieIndex.value = index
	}
	const selectedOptionValue = ref('')
	// const potionChange = (event:Event) => {
	// 	console.log(event.target.value)
	// 	uni.showModal({
	// 		title:'职业',
	// 		content: `${event.target.value}`
	// 	})
	// }
	const evaluateIcon = pay;
	const props = defineProps({
		starTotal: {
			type: Number,
			default: 5,
		},
	});
	const emits = defineEmits(['onDialogPopupShowOrHide']);

	const container = ref();

	const starList = ref<number>(props.starTotal);
	const currentStarIndex = ref<number>(-1);
	const comment = ref('');
	const currentConversation = ref<IConversationModel>();

	TUIStore.watch(StoreName.CONV, {
		currentConversation: (conversation : IConversationModel) => {
			currentConversation.value = conversation;
		},
	});

	const isEvaluateValid = computed(() => comment.value.length || currentStarIndex.value >= 0);

	const onDialogShow = () => {
		emits('onDialogPopupShowOrHide', true);
	};

	const onDialogClose = () => {
		resetEvaluate();
		emits('onDialogPopupShowOrHide', false);
	};

	const openLink = () => {
		if (isPC || isH5) {
			window.open(Link?.customMessage?.url);
		}
	};

	const closeDialog = () => {
		container?.value?.toggleDialogDisplay(false);
	};

	const resetEvaluate = () => {
		currentStarIndex.value = -1;
		comment.value = '';
	};

	const selectStar = (starIndex ?: any) => {
		if (currentStarIndex.value === starIndex) {
			currentStarIndex.value = currentStarIndex.value - 1;
		} else {
			currentStarIndex.value = starIndex;
		}
	};

	const submitEvaluate = async () => {
		if(!formData.value.publishPositionId){
			 return showToast('请选择职位')
		}
		if(!formData.value.money){
			 return showToast('请输入薪资')
		}	if(!formData.value.num){
			 return showToast('请输入单量')
		}
		// The evaluate message must have at least one star or comment to be submitted.
		// if (currentStarIndex.value < 0 && !comment.value.length) {
		// 	return;
		// }
		let datas = {
			  publishPositionId: formData.value.publishPositionId,
			  appWorkOrder: {
			    empUserId: uni.getStorageSync('qzId') || uni.getStorageSync('userId'),
			    price: formData.value.money,
					count: formData.value.num,
					settleType: typeList.value[fsIndex.value].value
			  }
		}
		const res = await api.saveAppWorkOrder(datas)
		uni.removeStorageSync('qzId')
		const payload = {
			data: JSON.stringify({
				businessID: 'pay',
				positionName: formData.value.positionName,
				money: formData.value.money,
				num: formData.value.num,
				salarySettleType: typeList.value[fsIndex.value].name
			})
		};
		const options = {
			to:
				currentConversation?.value?.groupProfile?.groupID
				|| currentConversation?.value?.userProfile?.userID,
			conversationType: currentConversation?.value?.type,
			payload,
			needReadReceipt: isEnabledMessageReadReceiptGlobal(),
		};
		const offlinePushInfoCreateParams : IOfflinePushInfoCreateParams = {
			conversation: currentConversation.value,
			payload: options.payload,
			messageType: TUIChatEngine.TYPES.MSG_CUSTOM,
		};
		const sendMessageOptions : SendMessageOptions = {
			offlinePushInfo: OfflinePushInfoManager.create(offlinePushInfoCreateParams),
		};
		TUIChatService.sendCustomMessage(options as SendMessageParams, sendMessageOptions);
		// close dialog after submit evaluate
		container?.value?.toggleDialogDisplay(false);
	};
</script>
<style scoped lang="scss">
::v-deep .is-input-border{
	border: none !important;
		background: transparent !important;
}
::v-deep .uni-easyinput__content-input{
	height: 30rpx !important;
	padding-left: 0 !important;
}	
.order-container{
	border-radius: 20rpx 20rpx 0 0;
	padding: 32rpx;
	box-sizing: border-box;
	padding-bottom: 100rpx;
	.order-top{
		display: flex;
		align-items: center;
		.top-title{
			flex: 1;
			text-align: center;
		}
	}
	.order-main{
		margin-top: 24rpx;
		.main-item{
			display: flex;
			flex-direction: column;
			margin-bottom: 32rpx;
			.item-label{
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 28rpx;
				color: #8C8C8C;
				line-height: 42rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
			.item-type{
				padding: 24rpx 32rpx;
				box-sizing: border-box;
				background: #F4F6FA;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				image{
					width: 36rpx;
					height: 36rpx;
				}
				.type-picker{
					flex: 1;
				}
				.type-ipt{
					display: flex;
					align-items: center;
					text{
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 28rpx;
						color: #262626;
						line-height: 42rpx;
						text-align: right;
						font-style: normal;
						text-transform: none;
					}
				}
			}
			.item-types{
				// padding: 24rpx 32rpx;
				box-sizing: border-box;
				// background: #F4F6FA;
				// border-radius: 24rpx 24rpx 24rpx 24rpx;
				// display: flex;
				// align-items: center;
				// justify-content: space-between;
				.type-fs{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.fs-item{
						width: 218rpx;
						height: 90rpx;
						background: #F4F6FA;
						border-radius: 24rpx 24rpx 24rpx 24rpx;
						padding: 24rpx 32rpx;
						box-sizing: border-box;
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 28rpx;
						color: #8C8C8C;
						line-height: 42rpx;
						text-align: center;
						font-style: normal;
						text-transform: none;
					}
					.fs-item-active{
						background: #E4E2FC;
						color: #6B64D3;
					}
					.fs-item:not(:first-child){
						margin-left: 16rpx;
					}
				}
			}
		}
	}
	.order-btn{
		background: #6B64D3;
		border-radius: 264rpx 264rpx 264rpx 264rpx;
		padding: 20rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
		font-weight: normal;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 48rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		margin-top: 32rpx;
	}
}
</style>